<template>
  <div class="EditColor">
    <div class="EditColor_btn">
      <n-button type="info" @click="handleAdd">添加</n-button>
    </div>
    <div class="EditColor_table">
      <n-data-table
          :columns="columns"
          :data="list"
      />
    </div>
    <ColorModal ref="modal" @list="getList"></ColorModal>
    <ProductModalImg ref="img"></ProductModalImg>
  </div>
</template>

<script lang="ts">
export default {
  name: "EditColor"
}
</script>

<script setup lang="ts">
import {h, ref} from "vue"
import ColorModal from '@/view/shopping/product/ColorModal.vue'
import {ColorUpdate} from '@/view/shopping/product/productType'
import {sms_product_color_del, sms_product_color_list} from '@/api/sms'
import {useRoute} from 'vue-router'
import url from '@/static/config'
import ProductModalImg from '@/view/shopping/product/ProductModalImg.vue'
import {NButton, NSpace} from 'naive-ui'
import useMsg from '@/hooks/useMsg'

const {success, error} = useMsg()

const modal = ref<{
  init: (data?: ColorUpdate) => void
}>()
const route = useRoute()

const list = ref<ColorUpdate[]>([])

const img = ref<{
  init: (url: string) => void
}>()

const columns = [
  {
    title: "当前颜色商品图片",
    key: "product_color_pic",
    align: "center",
    render: (r:ColorUpdate) => {
      return h('img', {
        src: url + "static/product/" + r.product_color_pic,
        width: "100",
        height: '100',
        style: {
          cursor: "pointer"
        },
        onClick: () => {
          img.value?.init(url + "static/product/" + r.product_color_pic)
        }
      })
    }
  },
  {
    title: "颜色名称",
    key: 'product_color_name',
    align: "center"
  },
  {
    title: "商品库存",
    key: "product_color_count",
    align: "center"
  },
  {
    title: "操作",
    key: 'id',
    align: "center",
    render: (r:ColorUpdate) => {
      return h("div",{
        style: {
          display: 'flex',
          justifyContent: 'center'
        }
      }, h(NSpace, {}, [
        h(NButton, {
          type: "info",
          onClick: () => {
            modal.value?.init(r)
          }
        }, "编辑"),
        h(NButton, {
          type: "error",
          onClick: () => {
            sms_product_color_del({
              id: r.id
            }).then(res => {
              if (res.code === 200) {
                success(res.message)
                getList()
              }else {
                error(res.message)
              }
            })
          }
        }, "删除")
      ]))
    }
  }
]

function getList () {
  console.log(route.query.product_id)
  sms_product_color_list({
    product_id: route.query.product_id as string
  }).then(res => {
    if (res.code === 200) {
      list.value = res.data
    }
  })
}

const handleAdd = () => {
  modal.value?.init()
}

function init () {
  getList()
}

defineExpose({
  init
})
</script>

<style scoped lang="scss">
$height: 60px;
.EditColor{
  height: 100%;
  &_btn{
    height: 60px;
  }
  &_table{
    height: calc(100% - 60px);
    overflow: hidden;
    padding-right: 20px;
    box-sizing: border-box;
    overflow-y: auto;
  }
}
</style>
